feat(demo): day-zero onboarding scenario (deferred setup)#4329
Open
rafaelgcrespo wants to merge 37 commits into
Open
feat(demo): day-zero onboarding scenario (deferred setup)#4329rafaelgcrespo wants to merge 37 commits into
rafaelgcrespo wants to merge 37 commits into
Conversation
Add a public, fully-mocked walkthrough that drives the REAL Studio chat components from a recorded stream — no backend, MCP transport, or auth. Framework (apps/mesh/src/web/demo/): - Director: a non-React class that owns all timing via @decocms/std sleep and mutates external Stores; components subscribe via useSyncExternalStore, so no useEffect is needed to animate. Screenplays read as a storyboard (await d.user/stream/think/tool/parallel/endTurn) and support multiple parallel chat tracks plus org switching, previews, a ghost cursor, and a typed terminal. - Chat seam: DemoChatStreamProvider supplies a scripted ChatStreamContextValue (via an exported DemoChatStreamContext) so the real renderers paint it identically to a live stream. - DemoProviders: mock ProjectContext + a network-free QueryClient. Two demos, each on its own URL (/demo chooser, /demo/<id>), light mode: - /demo/storefront — business user drops in a URL and gets an accurate perf+SEO diagnosis scorecard, a fix plan, parallel fixes, and a re-audit. - /demo/agents — Studio as a web Conductor: ghost cursor opens the connect- desktop modal, a mocked iTerm runs `bunx decocms link` then minimizes to "connected", then work runs across two orgs in parallel (chat + live preview) while switching context. The autoplay runner is guarded by a per-stores singleton with deferred teardown so the dev runtime's spurious effect re-runs can't restart a scenario mid-play. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Reworked the scripted demos for rhythm and a real ending.
- Pacing: deliberate beats with anticipation captions, reading holds after
big content (diagnosis / result tables), staggered parallel fixes, and
smoother typing speeds.
- Transitions: caption fade/slide, org-workspace crossfade on switch, preview
iframe fade-in on change, and cursor-driven org switching (the ghost cursor
glides to and clicks the org tab) instead of hard cuts.
- Ending: the demo no longer loops silently — after a full play-through it
shows an end card ("Get started free" / "Watch again"). The runner plays
once, then awaits a replay signal.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Storefront demo: - The agent now proposes a real WORK PLAN inline in the chat — a sprint of task cards — and waits for the viewer to approve (ghost cursor clicks "Approve & start"). Tasks then tick live; the first deliverable is a pull-request card (checks → merge), then deploy + re-audit. - Ends with a "get this every morning" card to connect Slack / Teams for a daily automated audit. - Inline cards render via a tiny part-renderer registry (chat/message/parts/extra-part-renderers.ts) the demo registers into — the core chat renderer stays demo-agnostic (empty registry in normal use). Agents demo: - Replaced the top org tabs with a real Studio-style sidebar of agents. You switch agents from the sidebar; background work keeps running and a notification dot appears on an agent's icon when its task finishes. Fix: card outputs are replaced immutably on each update so the compiler-memoized cards actually re-render (in-place mutation was silently dropped). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the threads-nested-under-agents sidebar with three structural sections: a collapsed "Team threads" accordion (other members' threads, with a "See all" jump to the monitoring Threads tab), a flat chronological "My threads" list, and a flat "Agents" list where clicking an agent opens its most-recent thread (or a new one). Removes the buried "Mine only / All members" filter toggle entirely — the member split is now structural. The Type filter and group-by-status toggle stay. Makes TaskRow's onArchive optional so team/agent rows are read-only (archiving hides a thread org-wide). Reuses the existing DnD layout for the agent list so pinning/ordering survive. Deletes the now-dead TaskGroup / SortableTaskGroups. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Restyle the Team threads header to match the other section labels (small uppercase, chevron + count, hover "See all"), and give My threads and Agents the same collapsible affordance. Extract a shared SidebarSectionHeader so all three read as peers. Team collapsed by default; My threads and Agents open. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…crumb, your-deco home, share-a-scope One continuous scripted walkthrough of the simplified navigation model: path = context. Breadcrumb (deco > org > agent) is the only nav and the chat's scope selector; org cards report as agents; every level has a Share that mints the MCP URL for exactly that scope. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…e away to Removes the Library sidebar item (full route swap that lost your chat context) in favor of a Chat-style toolbar toggle revealing a right-side panel on any org-shell screen. Browse state stays in the URL (?path=, route-agnostic); open state is per-user localStorage; /$org/files stays for deep links. Mobile gets a full-screen sheet. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…re beside breadcrumb The stage now copies the real shell's vocabulary: bg-sidebar cream body, card-shadow float cards, the home hero + capybara + corner art, the composer's Tools/scope/model chrome, colored tile avatars, real deco logo. Share moved from far-right to right beside the breadcrumb (it shares THAT scope). Library panel: give the floating card its cream backdrop + top breathing room so its rounded top isn't clipped. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ligns with chat The Library already renders its own title inside its floating card, and that card shares the chat card's shell padding — the extra panel header double-labeled it and pushed it out of alignment. Close X now floats over the card corner. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Home goes back to the vertical right rail — each org card now carries three metric squares (stat + delta, single-hue 12-point sparkline, watched number that updates live when work ships). Org agents also list directly under AGENTS in the home sidebar. Sparkline hues are the 700 steps of each org's hue, validated >=3:1 on the light surface. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… in the header row The toggle panel caps at ~560px, so the browse|preview split is never usable there — an open preview now fills the entire panel (the full /files route keeps the split, where there is real horizontal space). The panel close button moves INSIDE the Library's own header row (title · refresh · upload · close) instead of floating above it, which also stops it intercepting clicks. Adds the missing aria-label on the preview close button. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Wider canvas, bigger presence: larger metric values, taller squares, roomier cards. The orgs are the home's co-protagonist. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Home sidebar carries example my-threads; the org sidebar gets the full Team threads / My threads / Agents structure with teammate attribution — you can see what teammates are working on in each org, and the demo points at it. The morning brief now ends with an inline 'Vela Store needs you' card whose button navigates into the org, landing in a thread where the pilot has already asked the question — you answer and work proceeds. New generic showCard primitive on the Director. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…th status chips; breadcrumb icons per level The guiding caption moves to the top (was lost over the composer), grows, gains backdrop blur and a violet tint — it reads as the narrator, not a product component. The org CTA card gets a real app-UI body: status chips (Assets approved ✓ / QA passed ✓ / Hero not shipped) beside the navigate button. Every breadcrumb level now carries its own icon tile, not just the deco logo. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ecomes a sales question Nobody asks their teammate to 'keep LCP under 1.5s' — and the site shouldn't ship slow in the first place. Vela's pilot now audits before deploying, catches the regression the new hero introduced, subtasks Storefront Bot to fix it, then continues to deploy — the user only says 'ship it'. The agent-level zoom is now Store Ops with a question a human actually asks: how were yesterday's sales? (orders/revenue/AOV recap, drop converting at 2.1x). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…s, explorable end state
Every assistant turn now carries its speaker (avatar tile/logo + name)
via Track.setSender. Settings becomes what the model says it should be:
an AGENT — always the bottom one in / and /{org} — whose screens are
MCP apps rendered in the preview panel ('Make Rafa an admin' → tool
call → the Members app updates). No special settings screen: chat +
preview, everywhere. The end card is dismissible into explore mode —
crumbs, agent rows, org cards and Share are genuinely clickable on the
final state, with floating Replay/Get-started pills.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… affordances, narration trial, cadence fixes Entering an org lands on its OPERATIONS dashboard (KPIs with anomaly flags, diagnosed anomalies, agent-proposed opportunities, review queue — after Rafael's mocks), not a site preview. Store Ops gets a sales app; the pilot's follow-ups land on a tasks kanban; Settings' Members app gains an invite box and 'Invite your team' pins to every sidebar. The CTA card now lands WITH the digest (no dead wait). Cadence fixes: the team-threads beat moves to after the ship (was an urgency-killing detour, and its display:contents target sent the ghost cursor to the top-left corner); Share moves to Store Ops (take THIS agent to WhatsApp); explore-mode clicks now set the right per-agent preview — fixes 'settings shows nothing'. Trial narration: two caption clips (macOS say, Samantha Enhanced) with a mute toggle on the caption row. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…y default The captions are now the narrator's script: 17 lines that lead the tale (present tense, written for the ear) instead of labeling UI. Every line has a Zoe (Premium) clip keyed by exact caption text. Narration is ON by default — the first pointer/keydown anywhere unlocks autoplay and re-speaks the line on screen; the toggle mutes. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The show now opens with a start card — 'Play with narration' / 'Watch muted'. That click is the browser's audio unlock, so the FIRST line narrates (autoplay policy made cold-start narration impossible). Esc toggles a pausable clock: every Director/Track wait runs on chunked unpaused-time sleep (~150ms response), the in-flight clip pauses with it, and a pill says how to resume. Start/mute choices survive replays. Clips regenerated at 176wpm (186 was too fast). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ts pill changes Audited all 17 captions against clip durations: added a dashboard beat so line 5 completes, extended the two settings holds. Line 4 is now 'One brief, three orgs — and exactly one thing that actually needs you.' Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…o fit Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
caption() is now duration-aware: it awaits the previous line's clip window (from an exported VO_MS table) before replacing it, so no narration is ever cropped — regardless of voice or rate. All visible 'org(s)' become 'team(s)' (narration, rail label, digest header, helper text, end card). Clips regenerated with Isha @160wpm. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…2wpm - Captions now behave like subtitles: auto-clear when their narration window ends (no more idle pills over long tool sequences) and a fixed 700ms metronome gap before the next line. Verified with a MutationObserver run: 10/16 transitions at ~250ms pill-free, none over ~2.5s. - Script pass: "your deco Studio", proactive morning line, pilot→agent everywhere, "team context" framing, positive triage line, closing "same intelligence, only the context changes". - Every agent is a LOOP over goals: new minified SLO card (SLI, target, error budget, trend) in the Store Ops app; caption 11 says it. - All 17 clips regenerated at Isha @182wpm; VO_MS from afinfo. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Replaces macOS `say` clips with Maya1 (Apache 2.0) generated on-device: LM on MPS, sampling + SNAC decode on CPU (works around two PyTorch MPS bugs). Voice designed by description; all 17 clips whisper-verified word-for-word. VO_MS from sample-accurate wav lengths; final beat extended so markEnded() no longer crops the closing line. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Line 5 loses "nothing to rebuild"; line 15 ("Setup is one person's
job") removed entirely; logo line now "back home — to your agents".
- vo-09 re-taken (5.6s -> 4.1s, the slow read), vo-11 re-taken without
the mid-phrase pause (and whisper-verified "loop", not "looped").
- Clips renumbered to vo-01..16; all takes whisper-verified; cadence
re-measured end to end (every clip plays fully, ~250ms metronome).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Voice picked from a 3-way bake-off (Maya US female/male, Chatterbox). "No settings screens anywhere" line removed; clips renumbered vo-01..15, all whisper-verified (one slurred take re-rolled), beats retimed to the shorter reads, cadence re-measured end to end. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- PreviewFrame gains an app switcher (top right): the current screen is explicitly ONE MCP app of this agent among many. The kanban beat now CLICKS the Tasks chip; chips are clickable in explore mode too. - Kanban restyled to brand: column wells, white cards, brand chips, agent/human avatar rows. - Org/agent level split is chat 40 / preview 60. - Lines 1-2 re-taken cheerful (viewer-picked take B); line 1 is now "This is deco Studio — the home for your AI agents!" Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Plain `2fr` tracks have min-width:auto — the reasoning row's long single line stretched the chat column over the preview. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- New line 6: "Top left is your context" — the breadcrumb gets a violet
spotlight while it plays; the crumb is named as scope + agent selector.
- Share arc rebuilt: agent scope goes to "Claude Code, Codex, or
anywhere"; a new beat walks UP the breadcrumb and shares the whole
team as one MCP; back home, a new beat connects Claude to your deco
("all your teams at once"). Codex added to client chips.
- Kanban rebuilt with Studio's real tokens (warm neutrals, 6px radius,
ring-shadow cards) and story-connected tasks: the Winter Drop ship
sits in "Done · today", follow-ups mirror the sidebar team threads.
- Script is 18 lines; 4 new clips generated + whisper-verified (one
"Cloud Code" mispronunciation re-rolled); cadence verified end to end.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The onboarding companion to /demo/turtles, on the same branch so both play from /demo. Thesis: setup is one technical person's job — connect GitHub + site + Analytics once, deco reads everything, and the org assembles itself (operations dashboard + pre-populated backlog). Then the brand person (Michelle) is invited onto agents already set up and never sees GitHub. - new scenarios/day-zero.tsx: 5 beats (sign-up filter → connect cascade → diagnosis fan-out → org assembles: dashboard + kanban → "ready" ping → invite the brand), built on the Director/Track primitives. - reuses turtles builders/chrome (orgDashboard, tasksKanban, settingsApp, velaPreview, FloatCard, Composer, HomeCorners) — exported additively. - registered in scenarios/index.ts; 9 narration lines added to the VO map (dz-01..09 placeholders + estimated holds — clips to be recorded). fmt + `--cwd apps/mesh check` + lint all pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Same voice/pipeline as turtles (Maya1 US female, on-device). All 9 takes whisper-verified word-for-word; estimated VO_MS hold windows replaced with sample-accurate measurements. Verified headless: every line plays fully, no console errors. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
f00259e to
8c41cca
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Continues @vibegui's #4327 — the day-zero onboarding scenario the data-room meeting assigned to me. Targets
vibegui/turtles-demoso both scenarios ship together and play from/demo.Built entirely on the turtles primitives (Director/Track:
say,caption,tool,showCard,setSender,setPreview) and reusing its HTML app builders + chrome — no changes under the real app.The story — deferred setup
/demo/day-zero, 5 beats:Changes
demo/scenarios/day-zero.tsx— the scenario (Stage + screenplay).demo/scenarios/index.ts— registered inSCENARIOS(shows on/demo).demo/scenarios/turtles.tsx— additiveexports only (orgDashboard, tasksKanban, storeOpsApp, settingsApp, velaPreview, FloatCard, HomeCorners, Composer) so day-zero reuses them; no logic touched.demo/voiceover.tsx— 9 narration lines (dz-01..09) + estimated hold windows. Clips still to be recorded (@vibegui — same Maya1 pipeline).Checks
bun run fmt·bun run --cwd apps/mesh check(0 errors) ·bun run lint(0 errors) — verified by runningbun run devand playing/demo/day-zeroend-to-end (setup → connect cascade → shell + diagnosis → assemble). Demo-only; no DB changes.🤖 Generated with Claude Code
Summary by cubic
Adds a day‑zero onboarding demo at
/demo/day-zeroshowing deferred setup: connect GitHub, site URL, and GA once; deco diagnoses, builds an ops dashboard and backlog, and invites the brand. Runs on turtles demo primitives; no app logic changes.New Features
day-zeroscenario inSCENARIOSwith 5 beats: sign-up filter → connect cascade → diagnosis fan‑out → ops dashboard + kanban → ready ping + brand invite.orgDashboard,tasksKanban,settingsApp,velaPreview,FloatCard,Composer,HomeCorners(additive exports only).dz-01..09) and mapped measured hold windows invoiceover.tsx.Bug Fixes
cn()for app-switcher conditional classes in demo chrome for correct styling and lint compliance.Written for commit bef6774. Summary will update on new commits.